<template>
	<view class="container">
		<view class="head">
			<image :src="detail.avatar" class="avatar"></image>
			<text class="nickname">{{detail.nickName}}</text>
			<view class="detailtime"><text>{{detail.createTime}}</text></view>
		</view>
		<view class="content">
			{{detail.content}}
		</view>
		<view class="image">
			<image v-if="detail.imgs" :src="img" @tap="preivewImageBtn(img)" class="imagedata" v-for="img in detail.imgs"></image>
		</view>
		<view class="foot">
			<view class="like">
				<uni-icons v-if="!detail.liked" type="heart" size="20"></uni-icons>
				<text  v-if="!detail.liked">点赞</text>
				<uni-icons  v-if="detail.liked" type="heart-filled" size="20" color="red"></uni-icons>
				<text  v-if="detail.liked">已点赞</text>
			</view>
			<view class="comment" @click="commentBtn">
				<uni-icons type="chatbubble" size="20"></uni-icons>
				<text>评论</text>
			</view>
		</view>
		<view>
			<uni-popup ref="popup" background-color="#fff">
				<view class="popup-content">
					<uni-easyinput class="commentInput"  v-model="commentData" type="textarea" focus="true"
					placeholder="友好评论"></uni-easyinput>
					<button size="mini" type="primary" @click="sendComment">评论</button>
				</view>
			</uni-popup>
		</view>
		<view class="footcontent">
			<image  v-for="(item,index) in likeList"  :src="item.avatar" class="avatarlike" @click="photoCircle(item.id)"></image>
			<view v-for="(item,index) in commentList">
				<view  class="commentdata" @click="photoCircle(item.userId)">
					<image :src="item.avatar" class="avatarcomment"></image>
					<text class="nickname">{{item.nickName}}:</text>
					<text class="createtime">{{item.createTime}}</text>
				</view>
				<view class="comments">
					{{item.content}}
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
const photoCircle=(userId)=>{
	uni.navigateTo({
		url:"/pages/my/photocircle/index?userId="+userId
	})
}
const preivewImageBtn=(item)=>{
		// 预览图片
		uni.previewImage({
			urls: [item],
			longPressActions: {
				itemList: ['保存'],
				success: function(data) {
					// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					if(data.tapIndex == 0)[
						//保存图片
						uni.saveImageToPhotosAlbum({
							filePath: item,
							success: function () {
							}
						})
					]
				},
				fail: function(err) {
					// console.log(err.errMsg);
				}
			}
		});
}

const commentList=ref([
	{
		avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		nickName:'湖水粉丝1号',
		createTime:'2023-12-23 12:12:12',
		content:'这2只猫咪真可爱啊,只猫咪真可爱啊,只猫咪真可爱啊,只猫咪真可爱啊',
		userId:1
	},
	{
		avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		nickName:'湖水粉丝2号',
		createTime:'2024-12-23 12:12:12',
		content:'这2只猫咪真可爱啊,只猫咪真可爱啊,只猫咪真可爱啊',
		userId:1
	},
	{
		avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		nickName:'湖水粉丝3号',
		createTime:'2025-12-23 12:12:12',
		content:'这2只猫咪真可爱啊,只猫咪真可爱啊,只猫咪真可爱啊,只猫咪真可爱啊',
		userId:1
	},
	{
		avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		nickName:'湖水粉丝4号',
		createTime:'2026-12-23 12:12:12',
		content:'这2只猫咪真可爱啊,只猫咪真可爱啊,只猫咪真可爱啊,只猫咪真可爱啊',
		userId:1
	}
])
const likeList=ref([
	{
		avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		id:1
	},
	{
		avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		id:2
	},
	{
		avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		id:3
	},
	{
		avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		id:4
	},
	{
		avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		id:5
	}
])

const popup=ref()

const commentData=ref()

const sendComment=()=>{
	console.log("评论内容"+commentData.value)
}

const commentBtn=()=>{
	console.log("【评论")
	popup.value.open('bottom')
}

const cover = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg'
onLoad((option) => {
  console.log(option.id); //打印出上个页面传递的参数。
  console.log(option.name); //打印出上个页面传递的参数。
});
const detail = ref({
	avatar:'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
	nickName:'湖水',
	content:'发布一张可爱的图片发布一张可爱的图片发布一张可爱的图片发布一张可爱的图片发布一张可爱的图片发布一张可爱的图片',
	imgs:[
		'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
		'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg'
	],
	createTime:'2024-12-23 12:12:12',
	liked:true,
})
</script>

<style lang="scss">
	.detailtime{
		text-align: right;
		padding-right: 2.5%;
		font-size: 13px;
	}
	.popup-content {
		display:  flex;
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 100px;
		background-color: #fff;
	}
	.commentInput{
		margin-right: 3%;
		height: 50px;
		margin-bottom: 11%;
	}
	.container{
		letter-spacing: 1px;
	}
	.head{
		display: flex;
		align-items: center;
		padding-left: 3%;
		padding-bottom: 3%;
		padding-top: 3%;
	}
	.avatar{
		width: 50px;
		height: 50px;
		border-radius: 50%;
		margin-right: 3%;
	}
	.content{
		text-indent: 2em;
		margin-left: 3%;
	}
	.image{
		padding: 3%;
	}
	.imagedata{
		display: inline-block;
		width: 30%;
		height: 100px;
		margin-left: 2.5%;
	}
	.foot{
		display: flex;
		justify-content: space-between;
		padding: 3%;
		font-size: 13px;
	}
	.like{
		display: flex;
		align-items: center;
	}
	.comment{
		display: flex;
		align-items: center;
	}
	.footcontent{
		margin-left: 3%;
		padding-bottom: 3%;
	}
	.avatarlike{
		width: 30px;
		height: 30px;
		border-radius: 50%;
		margin-right: 1.5%;
	}
	.commentdata{
		display: flex;
		align-items: center;
		margin-top: 3%;
		font-size: 13px;
		justify-content: space-between;
	}
	.avatarcomment{
		width: 30px;
		height: 30px;
		border-radius: 50%;
		margin-right: 1.5%;
	}
	.nickname{
		width: 40%;
		font-weight: 600;
	}
	.createtime{
		width: 50%;
		text-align: right;
		padding-right: 3%;
	}
	.comments{
		font-size: 13px;
		margin-right: 2.5%;
		text-indent: 2em;
	}
</style>